import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
import { Component, OnInit, Input, Output, EventEmitter, ElementRef, Renderer2, ViewChild } from '@angular/core';
import { SharedConfigService } from '../../config/shared-config.service';

export class AnimationType {
    static COMMON = 'COMMON';
    static RIPPLE = 'RIPPLE';
    static BUBBLE = 'BUBBLE';
}

export class ButtonSize {
    static BIG = 'BIG';
    static SMALL = 'SMALL';
}

@Component({
    selector: 'cmb-button',
    templateUrl: './button.component.html',
    styleUrls: ['./button.component.scss'],
    animations: [
        trigger('nextAnimate', [
            state('active', style({
                transform: 'scale(1)'
            })),
            transition('void <=> *', [
                animate('0.6s cubic-bezier(.68,-0.55,.27,1.55)', keyframes([
                    style({ transform: 'scale(0.98)', offset: 0 }),
                    style({ transform: 'scale(1)', offset: 0.3 }),
                    style({ transform: 'scale(1.02)', offset: 0.5 }),
                    style({ transform: 'scale(1)', offset: 1.0 })
                ]))
            ])
        ]),
    ]
})
export class ButtonComponent implements OnInit {

    nextAnimate = 'void';
    clcking = false;

    _isLoading = false;
    _backgroundColor;

    @Input()
    set isLoading(il: boolean) {
        this._isLoading = il || false;
    }

    get isLoading() {
        return this._isLoading;
    }

    // @Input()
    // text = '';

    @Input()
    animateType = AnimationType.COMMON;

    @Input()
    set disabled(dis: boolean) {
        this._disabled = dis || false;
        this.setDisabled = true;
    }

    get disabled() {
        return this._disabled;
    }

    @Input()
    buttonSize = ButtonSize.BIG;

    @Output() click = new EventEmitter<any>();

    @Input()
    set backgroundColor(color: string) {
        this._backgroundColor = color;
    }

    get backgroundColor() {
        return this._backgroundColor;
    }

    @ViewChild('button') button: ElementRef;

    // @Input()
    // isHttpButton = false;

    private setDisabled = false;
    private _disabled = true;

    constructor(sharedConfigService: SharedConfigService, private elementRef: ElementRef, private renderer2: Renderer2) {
        this._backgroundColor = sharedConfigService.baseColor || '#00A8E8';
    }

    ngOnInit() {
        if (this.setDisabled === false) {
            this._disabled = false;
        }

        if (this.elementRef.nativeElement.classList &&
            this.elementRef.nativeElement.classList instanceof Array) {
            this.elementRef.nativeElement.classList.forEach(element => {
                if (element.indexOf('ng-') <= 0) {
                    this.renderer2.addClass(this.button.nativeElement, element)
                }
            });
        }
    }

    userClick($event) {
        $event.stopPropagation();
        if (this._disabled === false && this.clcking === false && this.isLoading === false) {
            this.clcking = true;
            setTimeout(() => {
                this.clcking = false;
            }, 300)
            if (this.animateType === AnimationType.BUBBLE) {
                if (this.nextAnimate === 'active') {
                    this.nextAnimate = 'void';
                } else {
                    this.nextAnimate = 'active';
                }
            }
            this.click.emit($event);
        }
    }
}
